import { useEffect, useState } from 'react'

import type { ComponentProps } from 'react'
import type { CarouselApi } from '.'

import { type Meta, type StoryObj } from '@storybook/react'
import AutoplayPlugin from 'embla-carousel-autoplay'

import { Card, CardContent } from '@/primitives/card'

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '.'

const meta: Meta<typeof Carousel> = {
  component: Carousel,
}

export default meta

type Story = StoryObj<typeof Carousel>

export const Default: Story = {
  render: (args) => (
    <div className='flex justify-center'>
      <Carousel {...args} className='w-full max-w-xs'>
        <CarouselContent>
          {Array.from({ length: 5 }).map((_, index) => (
            <CarouselItem key={index}>
              <div className='p-1'>
                <Card>
                  <CardContent className='flex aspect-[1_/_1] items-center justify-center p-6'>
                    <span className='text-4xl font-semibold'>{index + 1}</span>
                  </CardContent>
                </Card>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  ),
}

export const Sizes: Story = {
  render: (args) => (
    <div className='flex justify-center'>
      <Carousel
        {...args}
        opts={{
          align: 'start',
        }}
        className='w-full max-w-sm'
      >
        <CarouselContent>
          {Array.from({ length: 5 }).map((_, index) => (
            <CarouselItem key={index} className='md:basis-1/2 lg:basis-1/3'>
              <div className='p-1'>
                <Card>
                  <CardContent className='flex aspect-[1_/_1] items-center justify-center p-6'>
                    <span className='text-3xl font-semibold'>{index + 1}</span>
                  </CardContent>
                </Card>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  ),
}

export const Spacing: Story = {
  render: (args) => (
    <div className='flex justify-center'>
      <Carousel {...args} className='w-full max-w-sm'>
        <CarouselContent className='-ml-1'>
          {Array.from({ length: 5 }).map((_, index) => (
            <CarouselItem
              key={index}
              className='pl-1 md:basis-1/2 lg:basis-1/3'
            >
              <div className='p-1'>
                <Card>
                  <CardContent className='flex aspect-[1_/_1] items-center justify-center p-6'>
                    <span className='text-2xl font-semibold'>{index + 1}</span>
                  </CardContent>
                </Card>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  ),
}

export const Orientation: Story = {
  render: (args) => (
    <div className='flex justify-center pt-12'>
      <Carousel
        {...args}
        opts={{
          align: 'start',
        }}
        orientation='vertical'
        className='w-full max-w-xs'
      >
        <CarouselContent className='-mt-1 h-[200px]'>
          {Array.from({ length: 5 }).map((_, index) => (
            <CarouselItem key={index} className='pt-1 md:basis-1/2'>
              <div className='p-1'>
                <Card>
                  <CardContent className='flex items-center justify-center p-6'>
                    <span className='text-3xl font-semibold'>{index + 1}</span>
                  </CardContent>
                </Card>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  ),
}

const WithSlideNumberExample = (props: ComponentProps<typeof Carousel>) => {
  const [api, setApi] = useState<CarouselApi>()
  const [current, setCurrent] = useState(0)
  const [count, setCount] = useState(0)

  useEffect(() => {
    if (!api) {
      return
    }

    setCount(api.scrollSnapList().length)
    setCurrent(api.selectedScrollSnap() + 1)

    api.on('select', () => {
      setCurrent(api.selectedScrollSnap() + 1)
    })
  }, [api])

  return (
    <div>
      <div className='flex justify-center'>
        <Carousel {...props} setApi={setApi} className='w-full max-w-xs'>
          <CarouselContent>
            {Array.from({ length: 5 }).map((_, index) => (
              <CarouselItem key={index}>
                <Card>
                  <CardContent className='flex aspect-[1_/_1] items-center justify-center p-6'>
                    <span className='text-4xl font-semibold'>{index + 1}</span>
                  </CardContent>
                </Card>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious />
          <CarouselNext />
        </Carousel>
      </div>
      <div className='py-2 text-center text-sm text-muted-foreground'>
        Slide {current} of {count}
      </div>
    </div>
  )
}

export const WithSlideNumber: Story = {
  render: (args) => <WithSlideNumberExample {...args} />,
}

export const Autoplay: Story = {
  render: (args) => (
    <div className='flex justify-center'>
      <Carousel
        {...args}
        plugins={[AutoplayPlugin({ delay: 2000, stopOnInteraction: true })]}
        className='w-full max-w-xs'
      >
        <CarouselContent>
          {Array.from({ length: 5 }).map((_, index) => (
            <CarouselItem key={index}>
              <div className='p-1'>
                <Card>
                  <CardContent className='flex aspect-[1_/_1] items-center justify-center p-6'>
                    <span className='text-4xl font-semibold'>{index + 1}</span>
                  </CardContent>
                </Card>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  ),
}
